<script setup lang="ts">
import { ref, defineExpose, defineEmits, nextTick } from "vue"
import { getKeyBoard, setKeyBoard, getTetrisConfig, setTetrisConfig } from "@/utils/config"
import { 
  isMobile,
} from "@/utils/utils"

const show = ref(false)
const showMask = ref(false)
const isChange = ref(false)
const hasChangeAction = ref('')
const inputEl = ref(null)

const list = ref([]) // 键位
const config = ref(getTetrisConfig()) // 配置

// init
const initList = () => {
  list.value = []
  const keyBoard = getKeyBoard()
  Object.keys(keyBoard).forEach((key) => {
    list.value.push({
      name: key,
      key: keyBoard[key]
    })
  })
}
initList()


const open = () => {
  show.value = true
}

// 显示mask
const handleShowMask = (name) => {
  nextTick(() => {
    inputEl.value.focus()
  })
  showMask.value = true
  hasChangeAction.value = name
}

// 设置键位
const handleSetKeyBoard = (e) => {
  if (!showMask.value) return
  e.preventDefault()
  const code = e.code
  const name = hasChangeAction.value
  showMask.value = false
  setKeyBoard({
    [name]: code
  })
  isChange.value = true
  initList()
}

// 更改配置
const handleChangeConfig = () => {
  setTetrisConfig(config.value)
  isChange.value = true
}

// 关闭弹窗
const handleHide = () => {
  emit('hide', isChange.value)
}

// 更改虚拟按键位置
const handleChangeVirtualButton = () => {
  show.value = false
  handleHide()
  emit('changeVirtualButton')
}

defineExpose({ open, handleChangeVirtualButton })
const emit = defineEmits(['hide', 'changeVirtualButton'])
</script>

<template>
  <el-dialog v-model="show" width="80vmin" align-center :show-close="false" destroy-on-close
    class="!bg-white/20 overflow-y-auto" @closed="handleHide">
    <template #header><div class="px-6 py-4 text-white/90 font-black text-3xl">Game Settings</div></template>
    <div class="h-[80vmin] px-6 flex flex-col gap-4">
      <div class="item">
        <div class="title">DAS</div>
        <el-slider v-model="config.das" :min="10" :max="200" @change="handleChangeConfig" />
        <div class="value">{{ config.das }}</div>
      </div>
      <div class="item">
        <div class="title">ARR</div>
        <el-slider v-model="config.arr" :min="10" :max="100" @change="handleChangeConfig"  />
        <div class="value">{{ config.arr }}</div>
      </div>
      <div class="item">
        <div class="title">SORT ARR</div>
        <el-slider v-model="config.sortArr" :min="10" :max="100" @change="handleChangeConfig"  />
        <div class="value">{{ config.sortArr }}</div>
      </div>
      <div class="item">
        <div class="title">auto pause</div>
        <el-switch
          v-model="config.autoPause"
          @change="handleChangeConfig"
        />
      </div>
      <el-divider />
      <div class="title text-2xl">Control</div>
      <template v-if="isMobile()">
        <el-button type="primary" @click="handleChangeVirtualButton()">更改虚拟按键位置</el-button>
      </template>
      <template v-else>
        <div class="item" v-for="(i, index) in list" :key="index">
          <div class="title">{{ i.name }}</div>
          <el-button type="primary" @click="handleShowMask(i.name)">{{ i.key }}</el-button>
        </div>
      </template>
    </div>
  </el-dialog>
  <div v-show="showMask" class="setKeyBoardMask" @click="() => showMask = false">
    KEY DOWN
    <el-input class="input" ref="inputEl" autoFocus @keydown="handleSetKeyBoard" />
  </div>
</template>

<style lang="scss" scoped>
.item {
  @apply flex items-center gap-8;
  .value {
    @apply w-max text-right text-white/80 text-xl font-bold text-nowrap;
  }
}
.title {
  @apply text-white/80 text-xl font-bold text-nowrap;
}

$bg: #f0f2f5;
.setKeyBoardMask {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10vmin;
  letter-spacing: 2vmin;
  .input {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0
  }
}
</style>
